<template>
    <div  div class="display-container">
        <div v-if="DetailContent">
            <div class="introduction">
                <ul>
                    <li>
                        <span>{{DetailContent.area1}}-{{DetailContent.area2}}</span>
                        <span class="apple" v-show="DetailContent.source==2"></span>
                        <span class="android" v-show="DetailContent.source==1"> </span>
                        <span class="right" v-show="DetailContent.status==2">上架中</span>
                        <span class="right" v-show="DetailContent.status==1">公示期</span>
                    </li>
                    <li class="role">
                        <div class="role-info">
                            <img :src="imgUrl[DetailContent.type]" alt="" >
                            <div class="info">
                                <div class="first">
                                    <span class="gs" v-show="DetailContent.status==1"></span>
                                    <span class="hj" v-show="DetailContent.is_counteroffer==1"></span>
                                    <span class="name">{{DetailContent.united}}</span>
                                    <span class="level">{{DetailContent.level}}级</span>
                                    <span class="sc" >{{DetailContent.star}}人收藏</span>
                                </div>
                                <div class="second">
                                    <span class="price">￥{{DetailContent.price}}</span>
                                </div>
                                <div class="third">
                                    <span class="all_point">总评分:{{DetailContent.score_total}}</span>
                                    <span class="role_point">人物评分:{{DetailContent.score_role}}</span>
                                </div>
                                <div class="forth">
                                <span class="red" v-for="signitem in sp(DetailContent.sign)" :key="signitem">{{signitem}}</span>
                                </div>

                            </div>
                        </div>
                    </li>
                    <li>
                        <span >出售剩余时间：{{countDown(DetailContent.start_date)}}</span>
                        <span class="right">卖家：{{DetailContent.seller}}</span>
                    </li>
                </ul>
            </div>
            <div class="pay">
                <span class="small">分次付</span>
                <span class="big">一笔订单多次付</span>
                <i></i>
            </div>
            <div id="detail">
                <ul class="items_filter" :class="searchBarFixed == true ? 'isFixed' :''">
                    <router-link :to="{path:'/detail/character',query:{id:$route.query.id}}" active-class="detail-active" > <li>人物属性</li></router-link>
                    <router-link :to="{path:'/detail/equipment',query:{id:$route.query.id}}" active-class="detail-active"><li>道具/装备</li></router-link>
                    <router-link :to="{path:'/detail/pet',query:{id:$route.query.id}}" active-class="detail-active"><li>宠物/孩子</li></router-link>
                    <router-link :to="{path:'/detail/skill',query:{id:$route.query.id}}" active-class="detail-active"><li>技能</li></router-link>
                    <router-link :to="{path:'/detail/other',query:{id:$route.query.id}}" active-class="detail-active"><li>其它</li></router-link>
                </ul>
            </div>
            <router-view></router-view>
        </div>
        <div class="bottom-container">
            <div class="left">
                <div class="sc">
                    <i class="sc-icon" @click="star" v-show="!StarContent"></i>
                    <i class="staractive" @click="cancel" v-show="StarContent"></i>
                    <span>收藏</span>
                </div>
                <div class="hj" >
                    <div v-show="DetailContent.is_counteroffer==1">
                    <i class="hj-icon" @click="counter"></i>
                    <span>还价</span>
                    </div>
                </div>
            </div>
            <div class="right" @click="pay()">立即购买</div>
        </div>
    </div>
</template>
<script>
import axios from "axios";
import Pictures from "@/pages/common/Pictures";
import LoginAxios from "@/pages/common/LoginAxios";
export default {
    data(){
        return{
            searchBarFixed:false,
            StarContent:'',
            StarStatus:'',
            imgUrl:Pictures.imgUrl
            
        }
    },
    name:'DetailDisplay',
    props:{
        DetailContent:Object
    },
    computed:{
        sp(){
            return function(sign){
                return (sign+'').split(';');
                };
            },
    },
    methods:{
        countDown(time){
        var nowTime=+new Date();
        var inputTime=+new Date(time);
        var times=(inputTime-nowTime)/1000+100*24*60*60;
        var d =parseInt(times/60/60/24);
        var h =parseInt(times/60/60%24);
        var m =parseInt(times/60%60);
        var s =parseInt(times%60);
        return d+'天'+h+'时'+m+'分'+s+'秒'
        },

        handleScroll () {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            var offsetTop = document.querySelector('#detail').offsetTop
            if (scrollTop > offsetTop) {
                this.searchBarFixed = true
            } else {
                this.searchBarFixed = false
            }
            // console.log(scrollTop,offsetTop)
        },
       async star(){
            var id=this.$route.query.id ;
            var param={shop_id:id };
            var result= this.csList=await LoginAxios.loginAxios("http://81.68.253.206:8081/role/star",param,"/detail/character?id="+id);
            if(result){
                this.StarContent=1;
            }
        },
      async cancel(){
            var id=this.$route.query.id ;
            var param={shop_id:id };
            var result= this.csList=await LoginAxios.loginAxios("http://81.68.253.206:8081/role/unstar",param,"/detail/character?id="+id);
            if(result){
                this.StarContent=0;
            }
        },
        counter(){
        var token=localStorage.getItem("UserToken");
        var id =this.$route.query.id;
        if(token){
           
            this.$router.push({path: '/counter',query: {id:id}});
        }
        else{
             this.$router.push({ path: '/login', query: { historypath:'detail/character?id='+id}});
        }
        },
        pay(){
        var token=localStorage.getItem("UserToken");
        var id =this.$route.query.id
        if(token){
           
            this.$router.push({path: '/shopping',query: {id:id}});
        }
        else{
             this.$router.push({ path: '/login', query:{ historypath:'detail/character?id='+id}});
        }
        }
    },
    mounted(){
          window.addEventListener('scroll', this.handleScroll)
            var id =this.$route.query.id   
        axios.post("http://81.68.253.206:8081/role/starAndPrice",{shop_id:id},{
             headers: {
                'token': localStorage.getItem("UserToken") }
        }
        ).then(res=>{
        if(res.data&&res.data.data&&res.data.status){
            this.StarContent=res.data.data.is_star;

        }
        })
    },                   
    destroyed () {
        window.removeEventListener('scroll', this.handleScroll)
    },
}
</script>
<style lang="scss" scoped>
.display-container{
    width: 100%;
    margin-top: rem(140);
    margin-bottom: rem(130);
    .pay{
        margin-top: rem(13);
        height: rem(120);
        line-height: rem(120);
        background-color: #fff;
        padding: 0 rem(30);
        span{
            float: left;
        }
        .small{
            height: rem(40);
            line-height: rem(40);
            margin-top: rem(30);
            margin-right: rem(10);
            padding: rem(10);
            font-size: rem(35);
            color: #f09f40;
            background-color: #ffe7cc;
            border-radius: rem(10);
        }
        .big{
            font-size: rem(40);
        }
        i{
            position: absolute;
            right: rem(30);
            width:rem(45) ;
            height:rem(45);
            margin-top: rem(40);
            background: url(../../../assets/imgs/toright.svg) no-repeat 50% 50%;
            background-size: auto 100%;

        }
    }

    .introduction{
        width: 100%;
        padding:0 rem(30);
        background-color: #fff;
        li{
            width: 100%;
            height: rem(120);
            line-height: rem(120);
            font-size: rem(35);
            color:#888 ;
            border-bottom: 1px solid #f1f1f1;
            span{
                float: left;
            }
            .right{
                position: absolute;
                right: rem(30);
            }
            .apple{   
            width:rem(45) ;
            height:rem(45);
            margin-top: rem(40);
            margin-left: rem(10);
            background: url(../../../assets/imgs/apple.svg) no-repeat 50% 50%;
            background-size: auto 100%;
            }
            .android{
            width:rem(45) ;
            height:rem(45);
            margin-top: rem(40);
            margin-left: rem(10);
            background: url(../../../assets/imgs/android1.svg) no-repeat 50% 50%;
            background-size: auto 100%;
            }

        }
        .role{
            width: 100%;
            height: rem(250);
            border-bottom: 1px solid #f1f1f1;
            .role-info{
                display: flex;
                width: 100%;
                margin: rem(40) 0;
                height: rem(250);
                img{
                    float: left;
                    margin-right: rem(20);
                    width: rem(180);
                    height: rem(180);
                    border-radius: 5px;
                }
                .info {
                    float: left;
                    flex: 1;
                    height: rem(240);
                    .first {
                        width: 100%;
                        height:rem(55);
                        line-height: rem(55);
                        .gs{
                        width: rem(45);
                        height: rem(45);
                        margin: rem(10) rem(10) 0 0;
                        background: url(../../../assets/imgs/gong.svg) no-repeat 50% 50%;
                        background-size: auto 100%;
                        }
                        .hj{
                        width: rem(45);
                        height: rem(45);
                        margin: rem(10) rem(10) 0 0;
                        background: url(../../../assets/imgs/hai.png) no-repeat 50% 50%;
                        background-size: auto 100%;
                        }
                        .name{
                        font-size: rem(45);
                        height: rem(40);
                        color: #1e1e1e;
                        padding-right: 5px;
                        }
                        .level {
                        text-align: center;
                        width: rem(130);
                        color: #888;
                        margin-left: rem(10);
                        font-size: rem(35);
                        height: rem(40);
                        border-left: 1px solid #f1f1f1;
                        }
                        .sc{
                        position: absolute;
                        right: rem(30);
                        color: #888;
                        font-size: rem(35);
                        height: rem(40);
                        }
                    }
                    .second{
                        height: rem(70);
                        line-height: rem(70);
                        .price{
                            font-size: rem(50);
                            font-weight: 700;
                            color: #e74e4b;
                        }
                    }
                    .third{
                        height: rem(50);
                        line-height: rem(50);
                        .role_point{
                            margin-left: rem(30);
                        }
                    }
                    .forth{
                        height: rem(40);
                        line-height: rem(40);
                        .red{
                        color: #ee8381;
                        font-size: rem(35);
                        border: 1px solid #ee8381;
                        border-radius: 3px;
                        margin-right: rem(10);
                        }
                    }
                }
            
            }

        }
    }
    #detail{
        position: relative;
    margin-top:rem(13);
    background-color: #fff;
    .isFixed{
    position:fixed;
    top: rem(130);
    width: 100%;
    z-index: 99;
    min-width: 320px;
    max-width: 750px;
    background-color: #fff;
}
    ul{
        width: 100%;
        height: rem(120);
        line-height: rem(120);
        border-bottom: 1px solid #f1f1f1;
        li{
            float: left;
            font-size: rem(40);
            padding: 0 rem(30);
        }
        
    }
}
}
.detail-active{
   
            color: #fff;
            li{
 background-color: #e74e4b;
            }
}
.bottom-container{
    position: fixed;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: rem(140);
    min-width: 320px;
    max-width: 750px;
    .left{
        float: left;
        width: 50%;
        height: 100%;
        background-color: #fff;
        border-top: 1px solid #f5f5f5;
        .sc,
        .hj{
        position: relative;
        float: left;
        width: 50%;
        height: 100%;
        border-right: 1px solid #f5f5f5;
        .staractive{
        position: absolute;
        top: rem(20);
        right: 50%;
        width: rem(60);
        height: rem(60);
        margin-right: rem(-30);
        background: url(../../../assets/imgs/scred.svg) no-repeat 50% 50%;
        background-size: auto 100%;
        z-index: 4;
        }
        .sc-icon{
        position: absolute;
        top: rem(20);
        right: 50%;
        width: rem(60);
        height: rem(60);
        margin-right: rem(-30);
        background: url(../../../assets/imgs/sc.svg) no-repeat 50% 50%;
        background-size: auto 100%;
        z-index: 3;
        }
        .hj-icon{
        position: absolute;
        top: rem(20);
        right: 50%;
        margin-right: rem(-30);
        width: rem(60);
        height: rem(60);
        background: url(../../../assets/imgs/hj.svg) no-repeat 50% 50%;
        background-size: auto 100%;
        }
        span{
            position: absolute;
            width: rem(80);
            bottom: rem(10);
            right: 50%;
        margin-right: rem(-40);
        text-align: center;
        font-size: rem(35);
            

        }
        }
        
    }
    .right{
        float: left;
        width: 50%;
        height: 100%;
        line-height: 3;
        background-color: #e74e4b;
        font-size: rem(50);
        font-weight: 700;
        color: #fff;
        text-align: center;
    }
}




</style>